<template>
	<view class="">
		<uni-popup ref="popup" background-color="#fff">
			<!-- 筛选框 -->
			<view class="content">
				<view class="search_box">
					<uni-list class="center-list">
						<uni-list-item :showArrow="true" title="时间选择">
							<!-- 自定义 footer-->
							<template slot="footer">
								<view class="item-footer" style="width:70%">
									<view class="uni-flex">
										<button @click="setToday">今天</button>
										<button @click="setThisWeek">本周</button>
										<button @click="setThisMonth">本月</button>
									</view>
								</view>
							</template>
						</uni-list-item>
						<uni-list-item :showArrow="true" title="时间区间">
							<!-- 自定义 footer-->
							<template slot="footer">
								<view class="item-footer" style="width:70%">
									<uni-datetime-picker v-model="query.event_date" type="daterange"
										rangeSeparator="至" />
								</view>
							</template>
						</uni-list-item>

					</uni-list>
				</view>
				<view class="search_box">
					<uni-list class="center-list">
						<uni-list-item :showArrow="true" title="选择员工" clickable @click="showUserDialog">
							<!-- 自定义 footer-->
							<template slot="footer">
								<view class="item-footer">
									<text>请选择</text>
								</view>
							</template>
						</uni-list-item>
						<view class="get-new-list" v-if="userTitle.length>0">
							<uni-tag-ext @click="closableUserTag(index)" class="tag-list"
								v-for="(item,index) in userTitle" :key="index" :text="item.title" type="primary"
								size="small" :closable="true"></uni-tag-ext>
						</view>
					</uni-list>
				</view>
				<view class="search_box">
					<view class="search_list">
						<view class="search_title">跟进状态</view>
						<view class="search_type">
							<view class="view_box" v-for="(item, index) in activeStatus" :key="index"
								@click="toggleStatus(item.id)">
								<text>{{ item.title }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="search_box">
					<view class="search_list">
						<view class="search_title">获取方式</view>
						<view class="search_type">
							<view class="view_box" v-for="(item, index) in allocateTypes" :key="index"
								@click="toggleStatus(item.id)">
								<text>{{ item.title }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="btn">
				<button type="default" class="reset" @click="close">关闭</button>
				<button type="default" class="reset" @click="reset">重置</button>
				<button type="default" class="save" @click="doSearch()">搜索</button>
			</view>
		</uni-popup>
		<dd-search :appendToBody="true" :getSelected="getSelectedCompany" ref="ddSearch"></dd-search>
	</view>
</template>

<script>
	import orderCfg from '@/config/order.js';
	export default {
		props: {
			parent: {},
			query: {}
		},

		data() {
			return {
				userTitle: [],
			}
		},
		computed: {
			//审核状态
			activeStatus() {
				return orderCfg.activeStatus
			},
			//结算状态
			allocateTypes() {
				return orderCfg.allocateTypes
			},
		},
		methods: {
			showSearchPop() {
				this.$refs.popup.open('center');
			},
			close() {
				this.$refs.popup.close()
			},
			getSelectedCompany(ids, type, selectedGetTitles) {
				let _this = this;
				_this.searchIds = ids;
				if (type == 'company') {
					if (this.companTitle.length > 0) {
						let selectedTitel = selectedGetTitles;
						let baseTitel = _this.companTitle;
						let concatData = selectedTitel.concat(baseTitel);
						const res = new Map();
						let newList = (concatData.filter((concatData) => !res.has(concatData.id) && res.set(concatData.id,
							1)))

						_this.companTitle = [];
						_this.companTitle.push(...newList);

					} else {
						_this.companTitle.push(...selectedGetTitles);
					}
				}
				if (type == 'user') {
					if (this.userTitle.length > 0) {
						let selectedTitel = selectedGetTitles;
						let baseTitel = _this.userTitle;
						let concatData = selectedTitel.concat(baseTitel);
						console.log(concatData)
						const res = new Map();
						let newList = (concatData.filter((concatData) => !res.has(concatData.id) && res.set(concatData.id,
							1)))

						_this.userTitle = [];
						_this.userTitle.push(...newList);

					} else {
						_this.userTitle.push(...selectedGetTitles);
					}
				}
				if (type == 'hotel') {
					if (this.hotelTitle.length > 0) {
						let selectedTitel = selectedGetTitles;
						let baseTitel = _this.hotelTitle;
						let concatData = selectedTitel.concat(baseTitel);
						const res = new Map();
						let newList = (concatData.filter((concatData) => !res.has(concatData.id) && res.set(concatData.id,
							1)))

						_this.hotelTitle = [];
						_this.hotelTitle.push(...newList);

					} else {
						_this.hotelTitle.push(...selectedGetTitles);
					}
				}
			},
			//显示员工
			showUserDialog() {
				this.$refs['ddSearch'].showSearchDialog('user');
				console.log(this.$refs['ddSearch'])
			},
		}
	}
</script>

<style lang="less" scoped>
	@import '@/css/css-module.css';

	/deep/.uni-popup {
		z-index: 999;

	}

	.uni-flex {
		display: flex;

		/deep/uni-button {
			width: 80px;
			height: 28px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: 8px;
			font-size: 12px;
			white-space: wrap;
			color: #666666;
			background: #f6f6f6;
			border-radius: 5px;
			border: 0.5px solid #f6f6f6;
		}
	}
</style>
